<template>
  <div id="box">
    <div id="main1" style="width: 65%; height: 600px;"></div>
    <hr>
    <div id="main2" style="width:30%; height: 600px;"></div>
  </div>
</template>

<script>
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入柱状图图表，图表后缀都为 Chart
import { PieChart } from 'echarts/charts';
import { BarChart } from 'echarts/charts';
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
} from 'echarts/components';
// 标签自动布局、全局过渡动画等特性
import { LabelLayout } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';
import httpApi from '@/http';

// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  PieChart,
  CanvasRenderer,
  LabelLayout,
  GridComponent,
  BarChart
]);

export default {
  data () {
    return {
      // 定义图表，各种参数
      msg: "扇形图",
      datas: [
        { value: 0, name: '电视剧' },
        { value: 0, name: '电影' },
        { value: 0, name: '动画' },
      ],
      datas2: [
        { value: 0, name: '电视剧' },
        { value: 0, name: '电影' },
        { value: 0, name: '动画', },
      ]
    }
  },
  created () {
    httpApi.shouyeApi.shoucang().then(res => {
      console.log('请求收藏数据', res);
      if (res.data.code == 200) {
        this.datas.length = 0; //清空数组
        let dianshi = res.data.dianshicount
        let dongman = res.data.dongmancount
        let movie = res.data.moviecount
        this.datas.push({
          value: dianshi, name: '电视剧', itemStyle: {
            color: '#ef6667'
          }
        }, {
          value: dongman, name: '电影', itemStyle: {
            color: '#88ffc3'
          }
        }, {
          value: movie, name: '动画', itemStyle: {
            color: '#fff369'
          }
        },)
        console.log('datas:', this.datas);
      }
    })
    httpApi.shouyeApi.total().then(res => {
      console.log('请求总计数据', res);
      if (res.data.code == 200) {
        this.datas2.length = 0; //清空数组
        let dianshi = res.data.dianshicount
        let dongman = res.data.dongmancount
        let movie = res.data.moviecount
        this.datas2.push({
          value: dianshi, name: '电视剧', itemStyle: {
            color: '#ef6667'
          }
        }, {
          value: dongman, name: '电影', itemStyle: {
            color: '#88ffc3'
          }
        }, {
          value: movie, name: '动画', itemStyle: {
            color: '#fff369'
          }
        },)
        console.log('datas2:', this.datas2);
      }
    })
  },
  watch: {
    datas: {
      handler: function () {
        this.drawLine();
      },
      deep: true,
    },
    datas2: {
      handler: function () {
        this.drawLine2();
      },
      deep: true,
    },
  },
  methods: {
    drawLine () {
      console.log('收藏列表', this.datas);
      // 基于准备好的dom，初始化echarts实例
      var myChart1 = echarts.init(document.getElementById('main1'), 'dark');
      // 绘制图表
      let option = {
        title: {
          text: '电影,电视剧,动画用户收藏数量',
          // subtext: 'Fake Data',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: ['电视剧', '动画', '电影']
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        series: [
          {
            name: '用户收藏数量',
            type: 'pie',
            radius: [50, 250],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            data: this.datas,

          }
        ]
      }
      myChart1.setOption(option);
    },
    drawLine2 () {
      console.log('总计列表', this.datas2);
      // 基于准备好的dom，初始化echarts实例
      var myChart2 = echarts.init(document.getElementById('main2'), 'dark');
      // 绘制图表
      let option = {
        title: {
          text: '电影,电视剧,动画数量分布',
          // subtext: 'Fake Data',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c}",
        },

        xAxis: {
          data: ['电视剧', '电影', '动画']

        },
        yAxis: {},
        series: [
          {
            name: "数量分布",
            data: this.datas2,
            type: "bar",
          },
        ],
      }
      myChart2.setOption(option);
    }
  },
  mounted () {
    this.drawLine()//按照默认值绘制图表
    this.drawLine2()//按照默认值绘制图表

  }
}
</script>

<style lang="scss" scoped>
#box {
  display: flex;

  >hr {
    margin: 0 10px;
    border-color: transparent;
  }
}
</style>